<template>
    <div class="page-wrap" v-loading="loading">
        <flexbox justify="space-between" style="padding: 0 16px">
            <div>
                <span>选PBI目录（产品级）：</span>
                <h-search-select-cell :default-value="productLineValue" type="productLine" label="catalogName" keyField="catalogCode" @success="handleSelectChange" style="min-width: 160px" />
                <h-year-picker-cell v-model:value="year" class="margin-l-8" />
            </div>
            <a @click="jumpTo" v-auth="'/version/calendarList'">管理上线日历 <CalendarOutlined /></a>
        </flexbox>
        <h-section collapse :defaultOpen="item.status !== '3'" style="padding: 0" v-for="(item, tableIndex) of list" :key="item.id" @change="handleChange($event, tableIndex)">
            <template #title>
                <flexbox>
                    <span>【{{ item.onlineTime }}】</span>
                    <span>{{ item.versionNumber }}</span>
                    <div class="margin-l-8">
                        <a-tag :color="statusOptions[item.status].color">{{ statusOptions[item.status].name }} </a-tag>
                    </div>
                    <span class="margin-l-8 disable-font-color" style="font-weight: normal">{{ item.startTime || '暂无' }}~{{ item.onlineTime }}</span>
                </flexbox>
            </template>
            <template #titleExtra v-if="item.versionNumber">
                <flexbox justify="flex-end">
                    <a @click.stop="showOnlineWorkModal(item)" style="font-size: 14px">查看上线工单</a>
                </flexbox>
            </template>
            <a-table :scroll="{ x: 1500 }" rowKey="id" size="small" :loading="item.loading" :columns="tableColumns" :data-source="item.pmpProductVersionDTOs" :pagination="false">
                <template #pmpProductRequires="{ record, text, index: rowIndex }">
                    <template v-if="text">
                        <flexbox style="text-align: left" v-for="(item, index) of text.length > 2 && !record.isShowMore ? text.slice(0, 2) : text" :key="item.id">
                            <div v-fitText style="width: 100%">{{ item.issueKey }} {{ item.requireName }}</div>
                            <a class="margin-l-8" v-if="text.length > 2 && index === 1 && !record.isShowMore" @click="handleShowMore(tableIndex, rowIndex)">展开</a>
                        </flexbox>
                    </template>
                </template>
                <template #files="{ text }">
                    <file-cell :border="false" :span="24" :fileList="text" />
                </template>
                <template #processStatus="{ text }">
                    <span> {{ text ? $filters.valToNameFilter('processStatus', text) : '待开始' }}</span>
                </template>
                <template #expectTime="{ record }">
                    <span>{{ $filters.dateFilter(record.expectTime) }}</span>
                </template>
                <template #onlineTime="{ record }">
                    <span>{{ $filters.dateFilter(record.onlineTime) }}</span>
                </template>
            </a-table>
        </h-section>
        <a-empty v-if="isEmpty" />
        <a-modal :visible="onLineListVisible" :width="1200" title="相关上线工单" @cancel="onLineListVisible = false">
            <template #footer>
                <a-button @click="onLineListVisible = false">关闭</a-button>
            </template>
            <RelateWork :detail="detail" />
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import store from '@/store';
import { FileCell, HYearPickerCell, HSearchSelectCell } from '@/components';
import { useRouter } from 'vue-router';
import { CalendarOutlined } from '@ant-design/icons-vue';
import RelateWork from '@/views/version/onlineList/components/RelateWork.vue';
import { defineComponent, reactive, toRefs, watch, computed } from 'vue';
export default defineComponent({
    name: 'onlineList',
    components: {
        CalendarOutlined,
        FileCell,
        HYearPickerCell,
        RelateWork,
        HSearchSelectCell
    },
    setup() {
        const router = useRouter();
        const tableColumns = [
            {
                title: '子平台',
                dataIndex: 'systemName',
                align: 'center'
            },
            {
                title: '预发布版本名称',
                width: 300,
                dataIndex: 'versionName',
                align: 'center'
            },
            {
                title: '原型',
                dataIndex: 'files',
                width: 300,
                slots: { customRender: 'files' },
                align: 'center'
            },
            {
                title: '进度',
                width: 100,
                dataIndex: 'processStatus',
                slots: { customRender: 'processStatus' },
                align: 'center'
            },
            {
                title: '负责人',
                dataIndex: 'createUser',
                align: 'center'
            },
            {
                title: '需求列表',
                width: 300,
                ellipsis: true,
                dataIndex: 'pmpProductRequires',
                slots: { customRender: 'pmpProductRequires' },
                align: 'center'
            },
            {
                title: '预计上线日期',
                dataIndex: 'expectTime',
                slots: { customRender: 'expectTime' },
                align: 'center'
            },
            {
                title: '实际上线时间',
                dataIndex: 'onlineTime',
                slots: { customRender: 'onlineTime' },
                align: 'center'
            }
        ];
        const state = reactive<any>({
            productLineValue: '',
            options: [],
            list: [],
            year: new Date().getFullYear().toString(),
            loading: false,
            isEmpty: false,
            onLineListVisible: false,
            checkedCatalogName: '', //当前选中产品名称
            checkedCatalogType: null,
            detail: {}, // 上线工单detail
            statusOptions: {
                '1': { name: '规划中', color: 'orange' },
                '2': { name: '进行中', color: 'blue' },
                '3': { name: '已上线', color: 'green' },
                '4': { name: '待上线', color: 'blue' },
                '5': { name: '上线中', color: 'blue' }
            }
        });
        // 权限判断
        const hasAuth = computed(() => {
            return store.getters.userInfo.roles.some((item) => ['产品经理'].includes(item));
        });
        const jumpTo = () => {
            router.push({
                path: '/productAnalysis/versionControl',
                query: {
                    catalogCode: state.productLineValue,
                    catalogType: state.checkedCatalogType
                }
            });
        };
        const getList = async () => {
            state.isEmpty = false;
            state.loading = true;
            const query = {
                catalogCode: state.productLineValue,
                year: state.year
            };
            const { success, moule } = await api.pbiProductCalendarModel.findOnlineRelease(query);
            if (success) {
                state.list = [...moule];
                state.isEmpty = !state.list.length;
            } else {
                state.isEmpty = true;
            }
            state.loading = false;
        };
        // 展开已上线
        const getPaddingItem = async (index) => {
            const item = state.list[index];
            const { success, moule } = await api.pbiProductCalendarModel.paddingOnlineRelease([...item.pmpProductVersionDTOs]);
            if (success) {
                state.list[index].pmpProductVersionDTOs = [...moule];
            }
        };
        const handleChange = (val, index) => {
            const item = state.list[index];
            if (item.status === '3') {
                getPaddingItem(index);
            }
        };
        const handleShowMore = (tableIndex, rowIndex) => {
            state.list[tableIndex].pmpProductVersionDTOs[rowIndex].isShowMore = true;
        };
        // 展开的已上线的，才能看到工单
        const showOnlineWorkModal = (detail) => {
            detail.systemName = detail.pmpProductVersionDTOs.map((item) => item.systemName).join(',');
            state.detail = detail;
            state.onLineListVisible = true;
        };
        const handleSelectChange = (val) => {
            state.productLineValue = val.catalogCode;
            state.checkedCatalogName = val.catalogName;
            state.checkedCatalogType = val.catalogType;
        };

        watch(
            () => state.productLineValue,
            () => {
                getList();
            }
        );
        watch(
            () => state.year,
            () => {
                getList();
            }
        );
        return {
            tableColumns,
            ...toRefs(state),
            hasAuth,
            jumpTo,
            handleChange,
            handleShowMore,
            showOnlineWorkModal,
            handleSelectChange
        };
    }
});
</script>

<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 24px;
    background: #fff;
}
</style>